<script setup>
import {ref, inject} from "vue";
import adminCommunal from "@/components/communal/admin-communal.vue";
import { FlashOutline } from "@vicons/ionicons5";
import {getReviewedPosts} from "@/res/api/admin_api.js"
const { toPage } = inject("toPage")
function imgUrl(id){
  let imgId = id+164
  return 'https://picsum.photos/id/'+imgId+'/300/200'
}
let page = ref(1)
function pageChangeClick(page) {
  $message.destroyAll()
  $message.success(page)
}

let aricles = ref([])
getReviewedPosts().then((res)=>{
  console.log(res.data.list)
  aricles.value=res.data.list
})



</script>

<template>
  <admin-communal nav="articles">
    <n-flex vertical>
      <n-space justify="space-between">
        <n-text></n-text>
        <n-input-group style="margin-right: 3rem">
          <n-input round placeholder="搜索">
            <template #suffix>
              <n-icon :component="FlashOutline" />
            </template>
          </n-input>
          <n-button round type="primary" ghost>
            搜索
          </n-button>
        </n-input-group>
      </n-space>
      <n-grid x-gap="8" y-gap="12" cols="5">
        <n-gi v-for="item in aricles" :key="item.id">
          <n-card @click="toPage('admin/inspect',{postsId:item.id,type:'article'},)" >
            <template #cover>
              <n-image :width="100" :src=imgUrl(1) preview-disabled/>
            </template>
            <n-h3>{{item.title}}</n-h3>
<!--            <n-ellipsis  line-clamp="1" :tooltip="false">-->
<!--             {{item.content}}-->
<!--            </n-ellipsis>-->
          </n-card>
        </n-gi>
      </n-grid>
      <n-space justify="end">
        <n-pagination v-model:page="page" :page-count="100" @change="pageChangeClick(page)"/>
      </n-space>
    </n-flex>
  </admin-communal>
</template>

<style scoped>

</style>
